<%-- 
    Document   : Home
    Created on : Apr 21, 2013, 10:59:58 PM
    Author     : Sean
--%>

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>




<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Shipping</title>
        <link rel="stylesheet" type="text/css" href="site.css">
    </head>
    <body>
        
        
        <div id="Main-wrapper">
            
            <div id="header-wrapper">
                <div id="header">
                    <div class="header-content">
                        IST 411 E-Commerce
                    </div> 
                </div>

                
            </div>
            
            <div id="Main-content">
                <div class="steps">
                    <div style="float: left; width: 320px; background: #ccccff; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; font-weight: bold;">
                        1. &nbsp; &nbsp;  Shipping
                    </div>
                    <div style="float: left; width: 320px; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; font-weight: bold;">
                        2. &nbsp; &nbsp;  Billing
                    </div>
                    <div style="float: left; width: 320px; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; font-weight: bold;">
                        3. &nbsp; &nbsp;  Review
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div class="billing">
                    <form action="ShippingServlet" method="post">
                    <div>
                        <span style="font-size: 1.5em;">Shipping Information</span>
                    </div>
                    <hr/>
                    <div style="float: left; width: 450px; height: 275px;"> 
                        <div style="margin-top: 15px; float: left; width: 200px">
                            Name <span style="color: #ac2626;">*</span>
                            <br/>
                           <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                            <input type="text" name="ShippingName" style="width: 200px;"/>
                            <br/><br/>
                            Address <span style="color: #ac2626;">*</span>
                            <br/>
                           <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                            <input type="text" name="ShippingAddress" style="width: 200px;"/>
                            <br/><br/>
                            City <span style="color: #ac2626;">*</span>
                            <br/>
                            <!-- Must Modify for JSF (Needs Managed Bean)- cardnumber -->
                            <input type="text" name="ShippingCity" style="width: 200px;"/>
                            <br/><br/>
                             <div style="float: left; width: 115px;">
                                State <span style="color: #ac2626;">*</span>
                                <select name="ShippingState" style="width: 120px;"> 
                                    <option value="" selected="selected" disabled>Select a State</option> 
                                    <option value="AL">Alabama</option> 
                                    <option value="AK">Alaska</option> 
                                    <option value="AZ">Arizona</option> 
                                    <option value="AR">Arkansas</option> 
                                    <option value="CA">California</option> 
                                    <option value="CO">Colorado</option> 
                                    <option value="CT">Connecticut</option> 
                                    <option value="DE">Delaware</option> 
                                    <option value="DC">District Of Columbia</option> 
                                    <option value="FL">Florida</option> 
                                    <option value="GA">Georgia</option> 
                                    <option value="HI">Hawaii</option> 
                                    <option value="ID">Idaho</option> 
                                    <option value="IL">Illinois</option> 
                                    <option value="IN">Indiana</option> 
                                    <option value="IA">Iowa</option> 
                                    <option value="KS">Kansas</option> 
                                    <option value="KY">Kentucky</option> 
                                    <option value="LA">Louisiana</option> 
                                    <option value="ME">Maine</option> 
                                    <option value="MD">Maryland</option> 
                                    <option value="MA">Massachusetts</option> 
                                    <option value="MI">Michigan</option> 
                                    <option value="MN">Minnesota</option> 
                                    <option value="MS">Mississippi</option> 
                                    <option value="MO">Missouri</option> 
                                    <option value="MT">Montana</option> 
                                    <option value="NE">Nebraska</option> 
                                    <option value="NV">Nevada</option> 
                                    <option value="NH">New Hampshire</option> 
                                    <option value="NJ">New Jersey</option> 
                                    <option value="NM">New Mexico</option> 
                                    <option value="NY">New York</option> 
                                    <option value="NC">North Carolina</option> 
                                    <option value="ND">North Dakota</option> 
                                    <option value="OH">Ohio</option> 
                                    <option value="OK">Oklahoma</option> 
                                    <option value="OR">Oregon</option> 
                                    <option value="PA">Pennsylvania</option> 
                                    <option value="RI">Rhode Island</option> 
                                    <option value="SC">South Carolina</option> 
                                    <option value="SD">South Dakota</option> 
                                    <option value="TN">Tennessee</option> 
                                    <option value="TX">Texas</option> 
                                    <option value="UT">Utah</option> 
                                    <option value="VT">Vermont</option> 
                                    <option value="VA">Virginia</option> 
                                    <option value="WA">Washington</option> 
                                    <option value="WV">West Virginia</option> 
                                    <option value="WI">Wisconsin</option> 
                                    <option value="WY">Wyoming</option>
                                </select>
                                </div>
                                <div style="float: left; width: 70px; margin-left: 15px;">
                                    Zipcode <span style="color: #ac2626;">*</span>
                                    <br/>
                                    <input type="text" name="ShippingZip" style="width: 72px;" />
                                </div>

                        </div>
                        <div style="margin-top: 15px; float: left; margin-left: 40px; width: 200px;">
                            Phone <span style="color: #ac2626;"></span>
                            <br/>
                           <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                            <input type="text" name="Phone" style="width: 200px;"/>
                            <br/><br/>
                            Email <span style="color: #ac2626;"></span>
                            <br/>
                           <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                            <input type="Email" name="Email" style="width: 200px;"/>
                            <br/><br/>
                        </div>
                    </div>
                    
                    <div style="float: left; width: 470px; margin-left: 40px; border: 1px solid black; background: #FFFF99; height: 275px;">
                        <div style="float: left; width: 280px; height: 275px;">
                            <img src="resources/images/shippingguy.jpg" width="275" />
                        </div>
                        <div style="float: left; width: 165px; height: 275px; padding: 10px;">
                            <div style="font-weight: bold; font-size: 1.2em; padding-bottom: 5px;">
                                Shipping Method <span style="color: #ac2626;">*</span>
                            </div>
                            <input type="radio" name="expressShipping" >1-2 Day (Express)<br/><br/>
                            
                             <input type="radio" name="standardShipping" checked>2-5 Day (Standard)
                        </div>
                        
                    </div>
                    <div style="clear: both;"></div>
                    <div>
                        <hr/>
                        <input style="padding: 5px;" type="submit" value="Continue To Billing" />
                    </div>
                    </form>
                </div>
                
                
                
                
            </div>
            <div id="footer">
               &copy; 2013 | All Rights Reserved
           </div>
            
        </div>
        
        
        
    </body>
</html>
